<template>
  <div class="pager-container" v-if="allPager>1">
      <a @click="handleClick(1)" :class="{disabled:current<=1}">首页</a>
      <a @click="handleClick(current-1)" :class="{disabled:current<=1}">&lt;</a>
      <a @click="handleClick(item)" v-for="(item,i) in numbers" :key="i" :class="{active:current==item}">{{item}}</a>
      <a @click="handleClick(current+1)" :class="{disabled:current>=allPager}">&gt;</a>
      <a @click="handleClick(allPager)" :class="{disabled:current>=allPager}">尾页</a>
  </div>
</template>

<script>
export default {
    props:{
        //当前页码
        current:{
            type:Number,
            default:1,
        },
        //总数据量
        total:{
            type:Number,
            default:0,
        },
        //页容量
        limit:{
            type:Number,
            default:10,
        },
        //最大显示页数
        visibleNumber:{
            type:Number,
            default:10,
        }
    },
    computed:{
        //总页数
        allPager(){
            return Math.ceil(this.total/this.limit);
        },
        //显示的最小页码
        visibleMin(){
            let min=this.current-Math.floor(this.visibleNumber/2)
            if(min<1){
                min=1
            }
            return min;
        },
        //显示的最大页码
        visibleMax(){
            let max=this.current+Math.floor(this.visibleNumber/2)-1;
            if(max>this.allPager){
                max=this.allPager;
            }
            return max;
        },
        //所有页码
        numbers(){
            let num=[];
            for(let i=this.visibleMin;i<=this.visibleMax;i++){
                num.push(i);
            }
            return num;
        }

    },
    methods:{
        handleClick(newpage){
            if(newpage<1){
                newpage=1;
            }
            if(newpage>this.allPager)
            {
                newpage=this.allPager;
            }
            if(newpage===this.current){
                return;
            }
            this.$emit('pageChange', newpage);
        }
    }
}
</script>

<style lang='less'  scoped>
.pager-container{
    /* width: 100%;
    height: 100%; */
    display: flex;
    justify-content: center;
    margin: 20px 0;
    a{
        text-decoration: none;
        display: block;
        color: blue;
        margin: 0px 6px;
        cursor: pointer;
        &.disabled{
            color: gray;
            cursor: not-allowed;
        }
        &.active{
            color: black;
            font-weight: bold;
        }
    }
}

</style>